<template>
	<view class="shop-cart">
		<block v-if="list.length > 0">
			<view class="shop-navbar">
				<view class="nav-left">
					<text>共</text>
					<text class="nav-num">{{ list.length }}</text>
					<text>件商品</text>
				</view>
				<view class="nav-right" @tap="switchDel">
					{{ isDel ? '完成' : '管理' }}
				</view>
			</view>
			<view class="shop-list" v-if="list.length > 0">
				<view
					class="shop-item"
					v-for="(item, index) in list"
					:key="index"
				>
					<label class="radio" @tap="selectedItem(index)">
						<radio
							value=""
							style="transform: scale(0.8)"
							color="#1786f8"
							:checked="item.checked"
						/>
					</label>

					<image
						class="shop-img"
						@tap="toGoodsInfo(item.product_sku.product.id)"
						:src="'https://images.weserv.nl/?url=' + item.product_sku.product.image[0]"
						mode=""
					></image>
					<view class="shop-text">
						<view class="shop-name" @tap="toGoodsInfo(item.product_sku.product.id)">
							{{ item.product_sku.product.title }}
						</view>
						
						<view class="shop-color">{{ item.product_sku.title }}</view>
						<view class="shop-price">
							<view @tap="toGoodsInfo(item.product_sku.product.id)">¥{{ item.product_sku.price }}</view>
							<view class="boxNum">
								<u-number-box
									v-model="item.amount"
									bgColor="transparent"
									max="200"
								></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

		<view v-else class="shop-else-list">
			<u-empty
				mode="car"
				icon="http://cdn.uviewui.com/uview/empty/car.png"
				iconSize="150"
			>
				<u-button @click="goIndex" text="去逛逛"></u-button>
			</u-empty>
		</view>

		<view class="bot-nav">
			<view class="car_bottom" v-if="list.length > 0">
				<view class="bottom_content">
					<view class="bottom_left">
						<label class="radio foot-radio" @tap="checkedAllFn">
							<radio
								value=""
								style="transform: scale(0.8)"
								color="#1786f8"
								:checked="checkedAll"
							/>
							<text>全选</text>
						</label>
					</view>

					<view class="bottom_right" v-if="!isDel">
						<view class="right_total">
							<view class="total_text">总计:</view>
							<view class="total_price">
								<text class="priceText">
									￥{{ totalCount.pprice }}
								</text>
							</view>
						</view>
						<u-button @click="payOrder" text="结算"></u-button>
					</view>
					<view class="bottom_right" v-else>
						<!-- <view class="right_total">
							<view class="total_text">总计:</view>
							<view class="total_price">
								<text class="priceText">
									￥{{ totalCount.pprice }}
								</text>
							</view>
						</view> -->
						<u-button text="删除" @tap="delGoodsFn"></u-button>
					</view>
				</view>
			</view>
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			isDel: false,
			isLogin:false
		};
	},
	computed: {
		...mapState({
			list: (state) => state.cart.list
		}),
		...mapGetters(['checkedAll', 'totalCount'])
	},
	onLoad() {
		
	},
	onShow() {
		if(uni.getStorageSync('userInfo')){
			this.isLogin = true
		}else{
			this.isLogin = false
		}
		this.fetchCartList()
	},
	methods: {
		...mapActions(['checkedAllFn', 'delGoodsFn' , 'fetchCartList']),
		...mapMutations(['selectedItem', 'valChange1']),
		switchDel() {
			this.isDel = !this.isDel;
		}, 
		toGoodsInfo(id) {
			uni.navigateTo({
				url: '/mallPage/goodsInfo/goodsInfo?id=' + id
			});
		},
		goIndex(){
			if(this.isLogin){
				uni.navigateTo({
					url:`/pages/index/index`
				})
			}else{
				this.loginModal()
			}
		},
		// 结算
		payOrder(){
			if(this.isLogin){
				const list1 = this.list.filter(i => i.checked == true)
				if(list1.length > 0){
					const list2 = []
					list1.forEach(item => {
						list2.push({id:item.id,amount:item.amount})
					})
					uni.navigateTo({
						url: '/orderPage/awaitPayOrder/awaitPayOrder?type=cart&ids=' + JSON.stringify(list2)
					});
				}
			}else{
				this.loginModal()
			}
			
			
		}
	}
};
</script>

<style lang="scss" scoped>
.shop-else-list {
	position: relative;
	top: 260rpx;

	& /deep/ .u-button {
		margin-top: 50rpx;
		width: 360rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin-left: 24rpx;
		background-color: #1786f8;
		color: #ffffff;
		text-align: center;
		border-radius: 40rpx;
	}
}
.bot-nav {
	position: fixed;
	width: 100%;
	bottom: 0;
}
.car_bottom {
	width: 100%;
	// bottom: 0;

	.bottom_content {
		padding: 10rpx 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 120rpx;
		& .bottom_left {
			display: flex;
			align-items: center;
		}
		& .bottom_right {
			display: flex;
			align-items: center;
			& .right_total {
				display: flex;
				font-size: 28rpx;

				line-height: 36rpx;
				& .total_text {
					width: 84rpx;
					font-weight: 400;
					color: #0a0b0c;
				}
				& .total_price {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: center;
					& .priceText {
						font-weight: 600;
						color: #1786f8;
					}
					& .total_free {
						padding-top: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #77818e;
						line-height: 32rpx;
					}
				}
			}

			& /deep/ .u-button {
				width: 160rpx;
				height: 80rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				margin-left: 24rpx;
				background-color: #1786f8;
				color: #ffffff;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}
}

.shop-navbar {
	background-color: #fff;
	height: 80rpx;
	line-height: 80rpx;
	display: flex;
	justify-content: space-between;
	padding: 6rpx 30rpx;
	.nav-num {
		color: #1786f8;
	}
}
.shop-list {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	padding-bottom: 30rpx;
}
.shop-item {
	display: flex;
	padding: 30rpx 24rpx 0 24rpx;
	align-items: center;
}
.shop-img {
	border-radius: 10rpx;
	margin-right: 14rpx;
	margin-left: 14rpx;
	width: 180rpx;
	height: 180rpx;
}
.shop-text {
	flex: 1;
	font-size: 30rpx;
	// height: 100%;
	// height: 180rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.shop-name {
		flex: 1;
	}
}
.shop-color {
	font-size: 24rpx;
}
.shop-price {
	display: flex;
	justify-content: space-between;
	color: #1786f8;
	font-weight: bold;
	height: 50rpx;
	line-height: 50rpx;
	.boxNum {
		& /deep/ .u-number-box__plus,
		& /deep/ .u-number-box__minus,
		& /deep/ .u-number-box__input,
		& /deep/ .u-number-box__minus--disabled {
			width: 48rpx !important;
			height: 48rpx !important;
			border: 1px solid #eee;
			// border-radius: 0;
			// background-color: #f7fafd !important;
			margin: 0;
			font-size: 24rpx !important;
			.u-icon__icon {
				font-size: 24rpx !important;
			}
		}
		& /deep/ .u-number-box__input {
			width: 70rpx !important;
			border-left: none;
			border-right: none;
		}
	}
}
</style>
